<template>
	<view class="qilin-box">
		<view class="qilin-box-header">
			<icon class="iconfont icon-31fanhui1" @click="goBack()"></icon>
			<text>编辑个人资料</text>
		</view>
		<view class="qilin-box-image">
			<image :src="src" @click="changeImage()"></image>
			<text>点击更换头像</text>
		</view>
		<view class="qilin-box-message">
			<view class="qilin-box-message-item" v-for="item in userInfo" :key="item.title">
				<view class="qilin-box-message-item-title">{{item.title}}</view>
				<template v-if="item.title==='学校'">
					<picker mode="selector" :range="school" @change="selectSchool">
						<view class="qilin-box-message-item-content">{{currentSchool}}&nbsp;&nbsp;></view>
					</picker>
				</template>
				<template v-else-if="item.title==='性别'">
					<picker mode="selector" :range="gender" @change="selectGender">
						<view class="qilin-box-message-item-content">{{currentGender}}&nbsp;&nbsp;></view>
					</picker>
				</template>
				<template v-else-if="item.title==='生日'">
					<picker mode="date" :value="birthday" @change="selectBirthday">
						<view class="qilin-box-message-item-content">{{birthday}}&nbsp;&nbsp;></view>
					</picker>
				</template>
				<template v-else-if="item.title==='地区'">
					<picker mode="region" @change="selectCity">
						<view class="qilin-box-message-item-content">{{currentCity}}&nbsp;&nbsp;></view>
					</picker>
				</template>
				<template v-else>
					<view class="qilin-box-message-item-content" @click="updateInfo(item)">{{item.content}}&nbsp;&nbsp;></view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:[
					{
						title:"昵称",
						content:"烟锁湖堤柳，肴盘杯斟酌！"
					},
					{
						title:"抖音号",
						content:"EDGQiLin"
					},
					{
						title:"简介",
						content:"听君一席话，白读十年书"
					},
					{
						title:"学校",
						content:"巢湖学院"
					},
					{
						title:"性别",
						content:"男"
					},
					{
						title:"生日",
						content:"1996-05-12"
					},
					{
						title:"地区",
						content:"江苏省南京市雨花台区"
					}
				],
				src:"../../static/imgs/avator.jpg",
				school:["南京大学","北京大学","东南大学","清华大学","巢湖学院"],
				currentSchool:"巢湖学院",
				gender:["男","女","人妖"],
				currentGender:"男",
				birthday:"1996-05-12",
				currentCity:"江苏省-南京市-雨花台区"
			}
		},
		methods: {
			//点击返回上一页面事件监听
			goBack(){
				uni.navigateBack();
			},
			//点击修改头像事件监听
			changeImage(){
				uni.chooseImage({
					count:1,
					sizeType:["original","compressed"],
					sourceType:["album"],
					success:(res)=>{
						console.log(res);
						this.src=res.tempFilePaths[0];
					}
				})
			},
			//点击修改内容
			updateInfo(item){
				if(item.title==="昵称" || item.title==="抖音号"){
					uni.navigateTo({
						url:"/pages/modify/modify?item="+encodeURIComponent(JSON.stringify(item))
					});
				};
			},
			//点击选择学校事件监听
			selectSchool(e){
				// console.log(e);
				this.currentSchool=this.school[e.detail.value];
			},
			//点击选择性别事件监听
			selectGender(e){
				this.currentGender=this.gender[e.detail.value];
			},
			//点击选择日期事件监听
			selectBirthday(e){
				// console.log(e);
				this.birthday=e.detail.value;
			},
			//点击选择地区事件监听
			selectCity(e){
				// console.log(e);
				this.currentCity=e.detail.value.join("-");
			}
		},
		onShow(){
			uni.getStorage({
				key:"nickName",
				success:(res)=>{
					this.userInfo[0].content=res.data;
				}
			});
		}
	}
</script>

<style>
.qilin-box{
	width:100%;
	height:100%;
	background-color:#181725;
	padding-bottom:120rpx;
	color:#fff;
	position:relative;
}
.qilin-box-header{
	text-align:center;
	height:120rpx;
	line-height:120rpx;
}
.qilin-box-header>icon{
	float:left;
	margin-left:20rpx;
}
.qilin-box-header>text{
	font-size:32rpx;
}
.qilin-box-image{
	display:flex;
	flex-flow:column nowrap;
	align-items:center;
	justify-content:center;
	padding:30rpx;
}
.qilin-box-image>image{
	width:100rpx;
	height:100rpx;
	border-radius:50%;
}
.qilin-box-image>text{
	font-size:20rpx;
	color:#666;
	margin-top:12rpx;
}
.qilin-box-message{
	margin-top:20rpx;
}
.qilin-box-message-item{
	padding:20rpx 20rpx;
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	justify-content:space-between;
}
.qilin-box-message-item-title{
	font-size:24rpx;
}
.qilin-box-message-item-content{
	font-size:22rpx;
	color:#999;
}
</style>
